{% extends 'dashboard/base.html' %}

{% block title %}仪表盘 - 巧巧点餐管理后台{% endblock %}

{% block content %}
<h1>欢迎使用巧巧点餐管理系统</h1>

<!-- 统计卡片 -->
<div class="row">
    <div class="col-3">
        <div class="card">
            <div class="stats-card">
                <div class="stats-icon primary">
                    <i class="fas fa-utensils"></i>
                </div>
                <div class="stats-info">
                    <h3>{{ food_count }}</h3>
                    <p>菜品总数</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card">
            <div class="stats-card">
                <div class="stats-icon success">
                    <i class="fas fa-shopping-cart"></i>
                </div>
                <div class="stats-info">
                    <h3>{{ order_count }}</h3>
                    <p>订单总数</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card">
            <div class="stats-card">
                <div class="stats-icon info">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stats-info">
                    <h3>{{ user_count }}</h3>
                    <p>用户总数</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="card">
            <div class="stats-card">
                <div class="stats-icon secondary">
                    <i class="fas fa-tags"></i>
                </div>
                <div class="stats-info">
                    <h3>{{ category_count }}</h3>
                    <p>分类总数</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 统计信息 -->
<div class="row">
    <div class="col-6">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">今日概览</h2>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="stats-card">
                            <div class="stats-icon primary">
                                <i class="fas fa-calendar-day"></i>
                            </div>
                            <div class="stats-info">
                                <h3>{{ today_orders }}</h3>
                                <p>今日订单数</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stats-card">
                            <div class="stats-icon success">
                                <i class="fas fa-tasks"></i>
                            </div>
                            <div class="stats-info">
                                <h3>{{ pending_orders }}</h3>
                                <p>待处理订单</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="stats-card">
                            <div class="stats-icon info">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <div class="stats-info">
                                <h3>¥{{ month_sales }}</h3>
                                <p>本月销售额</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-6">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">最近订单</h2>
                <a href="{% url 'dashboard:order_list' %}" class="btn btn-primary btn-sm">查看全部</a>
            </div>
            <div class="card-body">
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in recent_orders %}
                            <tr>
                                <td>
                                    <a href="{% url 'dashboard:order_detail' order.id %}">
                                        {{ order.order_number }}
                                    </a>
                                </td>
                                <td>¥{{ order.total_price }}</td>
                                <td>
                                    {% if order.status == 1 %}
                                    <span class="badge badge-warning">待付款</span>
                                    {% elif order.status == 2 %}
                                    <span class="badge badge-info">待发货</span>
                                    {% elif order.status == 3 %}
                                    <span class="badge badge-primary">待收货</span>
                                    {% elif order.status == 4 %}
                                    <span class="badge badge-secondary">待评价</span>
                                    {% elif order.status == 5 %}
                                    <span class="badge badge-success">已完成</span>
                                    {% elif order.status == 6 %}
                                    <span class="badge badge-danger">已取消</span>
                                    {% endif %}
                                </td>
                                <td>{{ order.created_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">暂无订单</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 系统运行状态卡片 -->
<div class="col-lg-6 col-xl-4 mb-4">
  <div class="card border-left-info shadow h-100 py-2">
    <div class="card-body">
      <div class="row no-gutters align-items-center">
        <div class="col mr-2">
          <div class="text-xs font-weight-bold text-info text-uppercase mb-1">系统操作</div>
          <div class="row mt-3">
            <div class="col-12 mb-2">
              <button id="updateFoodSoldBtn" class="btn btn-info btn-block">
                <i class="fas fa-sync-alt mr-1"></i> 更新食品销量
              </button>
            </div>
            <div class="col-12">
              <a href="{% url 'dashboard:refresh_cache' %}" class="btn btn-secondary btn-block">
                <i class="fas fa-broom mr-1"></i> 清除缓存
              </a>  
            </div>
          </div>
        </div>
        <div class="col-auto">
          <i class="fas fa-cogs fa-2x text-gray-300"></i>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 热门商品 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">热门商品</h2>
                <a href="{% url 'dashboard:food_list' %}" class="btn btn-primary btn-sm">管理菜品</a>
            </div>
            <div class="card-body">
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>图片</th>
                                <th>名称</th>
                                <th>价格</th>
                                <th>分类</th>
                                <th>已售</th>
                                <th>评分</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for food in popular_foods %}
                            <tr>
                                <td>
                                    <img src="{{ food.image }}" alt="{{ food.name }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 5px;">
                                </td>
                                <td>{{ food.name }}</td>
                                <td>¥{{ food.price }}</td>
                                <td>{{ food.category.name }}</td>
                                <td>{{ food.sold }}</td>
                                <td>{{ food.rating }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center">暂无热门商品</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  $(document).ready(function() {
    // 更新食品销量按钮点击事件
    $('#updateFoodSoldBtn').click(function() {
      var btn = $(this);
      btn.html('<i class="fas fa-spinner fa-spin mr-1"></i> 处理中...');
      btn.prop('disabled', true);
      
      // 发送请求到后端API
      $.ajax({
        url: '/api/orders/update-food-sold/',
        type: 'POST',
        headers: {
          'X-CSRFToken': '{{ csrf_token }}'
        },
        success: function(response) {
          // 显示成功消息
          toastr.success(`${response.detail}，已处理${response.orders_processed}个订单`, '更新成功');
          btn.html('<i class="fas fa-check-circle mr-1"></i> 更新成功');
          
          // 2秒后恢复按钮状态
          setTimeout(function() {
            btn.html('<i class="fas fa-sync-alt mr-1"></i> 更新食品销量');
            btn.prop('disabled', false);
          }, 2000);
        },
        error: function(xhr) {
          // 显示错误消息
          var errorMsg = '更新失败';
          if (xhr.responseJSON && xhr.responseJSON.detail) {
            errorMsg = xhr.responseJSON.detail;
          }
          
          toastr.error(errorMsg, '错误');
          btn.html('<i class="fas fa-exclamation-circle mr-1"></i> 更新失败');
          
          // 2秒后恢复按钮状态
          setTimeout(function() {
            btn.html('<i class="fas fa-sync-alt mr-1"></i> 更新食品销量');
            btn.prop('disabled', false);
          }, 2000);
        }
      });
    });
  });
</script>
{% endblock %} 